<template>
	<view class="subMessage">
		<u-navbar title="订阅消息" title-size="36" title-color="#333333" back-icon-size="40"></u-navbar>
		<view class="message-container">
			<view class="message-section">
				<view class="message_content">
					<view class="content1">
						泡泡回复通知
					</view>
					<view class="content2">
						泡泡新发布、泡泡新回复、泡泡点赞分享
					</view>
				</view>
				<view class="recharge_btn">
					<button type="default" class="clockBtn" :class="[messageStatus ? 'disabled' : null]" :disabled="messageStatus" @click="onSubMessage('message')">{{ messageStatus ? '已订阅' : '立即订阅' }}</button>
				</view>
			</view>
			<view class="message-section">
				<view class="message_content">
					<view class="content1">
						活力值通知
					</view>
					<view class="content2">
						空间活力值不足、泡泡活力值不足
					</view>
				</view>
				<view class="recharge_btn">
					<button type="default" class="clockBtn" :class="[liveStatus ? 'disabled' : null]" :disabled="liveStatus" @click="onSubMessage('live')">{{ liveStatus ? '已订阅' : '立即订阅' }}</button>
				</view>
			</view>
			
			<view class="message-code">
				<view class="title">
					微信公众号
				</view>
				<view class="steps">
					<u-steps :list="numList" mode="number" current="-1" un-active-color="#FF7B02"></u-steps>
				</view>
				<view class="qrcode">
					<image style="width: 100%;height: 100%;" src="https://www.hesongzhineng.com/img/static/qrcode_for_hetangxiaoyuan.jpg" mode=""></image>
				</view>
				<view class="tips">
					公众号【荷塘校园】每天会及时推送哦~
				</view>
			</view>
			<view class="follow">
				<official-account></official-account>
			</view>
		</view>
		<u-modal
		    class="delete-container"
		    v-model="showLogin"
			title="登录提示"
		    content="请确认是否授权登录账号？"
		    confirm-text="立即登录"
			confirm-color="#FED034"
		    cancel-text="暂不登录"
		    :show-cancel-button="true"
		    @confirm="login"
		    @cancel="showLogin = false"
		></u-modal>
		<u-modal
		    class="delete-container"
		    v-model="showOpenSettingModal"
		    content="检测到您还没有开启订阅消息的权限，是否去设置？"
		    :show-cancel-button="true"
		    @confirm="confirmOpen"
		    @cancel="cancelOpen"
		></u-modal>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import UserLogin from '@/common/js/login'
	export default {
		mixins: [UserLogin],
		data() {
			return {
				numList: [{
					name: '关注公众号'
				}, {
					name: '进入小程序'
				}, {
					name: '账号授权登录'
				}],
				showLogin: false,
				showOpenSettingModal: false,
				messageStatus: false,
				liveStatus: false,
			}
		},
		computed: {
			...mapState(['userInfo', 'isLoginStatus'])
		},
		onLoad() {
			this.__init()
		},
		methods: {
			__init() {
				uni.showLoading()
				this.$u.get('/public/subscribe/querySubscribe').then(res => {
					uni.hideLoading()
					console.log(res)
					const tempMsg = res || []
					if(tempMsg.includes('RwKnQ1A-6QmEkin-ijHK0mPiY0VFV5ZrdnMvhBm3YiE')) {
						this.liveStatus = true
					}
					if(tempMsg.includes('NRHRxUYqatLvxf8fUeBaxVZf20XlsinoMROD4FSGXEs') ||
						tempMsg.includes('T2OfBW9m_aKc5nEHJ-slzzxKNKH2Rmy_kE10VX6rGQ4') || 
						tempMsg.includes('ECfaebwGy550OrQm2ctSMrY4UroJ1PEi6ppqchpjjLM')) {
						this.messageStatus = true
					}
				})
			},
			login() {
			    this.getUserInfo(() => {
					this.isLogin = true
			        this.$u.toast('登录成功');
			    })
			},
			onSubMessage(type) {
				// NRHRxUYqatLvxf8fUeBaxVZf20XlsinoMROD4FSGXEs
				let _id = []
				if(type == 'message') {
					_id = ['NRHRxUYqatLvxf8fUeBaxVZf20XlsinoMROD4FSGXEs', 'T2OfBW9m_aKc5nEHJ-slzzxKNKH2Rmy_kE10VX6rGQ4', 'ECfaebwGy550OrQm2ctSMrY4UroJ1PEi6ppqchpjjLM']
					if(this.messageStatus) return
				} else if(type == 'live') {
					_id = ['RwKnQ1A-6QmEkin-ijHK0mPiY0VFV5ZrdnMvhBm3YiE']
					if(this.liveStatus) return
				}
				
				uni.requestSubscribeMessage({
				    tmplIds: _id,
				    success: (res) => {
				        console.log(res,'res')
				        let templateId = _id.filter(i => res[i] === 'accept');
				        if( templateId.length ) {
							if(this.isLoginStatus) {
								this.$u.post('/public/subscribe/addSubscribe', {
								    templateId
								}).then(() => {
								    this.__init()
								})
							} else {
								this.showLogin = true
							}
				        }
				    },
				    fail: (err) => {
				        console.log(err,'requestSubscribeMessage err')
				        if (err.errCode === 20004) {
				            // 20004:用户关闭了主开关，无法进行订阅,引导开启
				            this.showOpenSettingModal = true;
				        }
				    }
				})
			},
			confirmOpen() {
			    uni.openSetting({
			        success: (res) => {
			
			        }
			    })
			},
			cancelOpen() {
			    this.showOpenSettingModal = false;
			    this.$u.toast('订阅失败');
			},
			
		}
	}
</script>

<style lang="less" scoped>
@import url("../../common/css/var.less");
.message-container {
	overflow: hidden;
	background: linear-gradient(360deg, rgba(254, 208, 52, 0.2) 0%, #FFB533 100%);
	padding-bottom: 80rpx;
	min-height: calc(100vh - 44px - var(--status-bar-height));
}
.clockBtn {
	width: 176rpx;
	height: 64rpx;
	line-height: 64rpx;
	border-radius: 36rpx;
	background-color: @orangeColor !important;
	color: #FFFFFF !important;
	font-size: 28rpx;
	&.disabled {
		background-color: #E7E7E7 !important;
		color: #999999 !important;
	}
}
.message-section, .message-code {
	margin: 32rpx 32rpx 0;
	background: #fff;
	border-radius: 16rpx;
	padding: 32rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.message_content {
		color: @mText;
		.content1 {
			font-size: 32rpx;
			line-height: 48rpx;
		}
		.content2 {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: @tText;
		}
	}
	
	
}
.message-code {
	flex-direction: column;
	.title {
		text-align: center;
		font-size: 40rpx;
		color: @mText;
		width: 100%;
	}
	.steps {
		width: 100%;
		padding: 32rpx 0 48rpx;
	}
	.qrcode {
		width: 400rpx;
		height: 400rpx;
	}
	.tips {
		font-size: 24rpx;
		color: @mText;
	}
}
.follow {
	margin: 32rpx 32rpx 0;
	background: #fff;
}
</style>
